<template>
    <div>
         <!--新增按钮-->
        <div>
            <div style="margin-top: 10px;display: flex;justify-content: left">
                <el-button icon="el-icon-plus" type="primary" @click="openDialog()">新增</el-button>
            </div>
        </div>
         <!--新增或编辑打开dialog，补充需要展示的字段-->
        <div>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" >
                <el-form :model="form" class="horizontal-form">
                    <el-row>
                        <!-- 双列布局 -->
                        <el-col :xs="24" :sm="12">
                            <el-form-item label="订单ID" >
                                <el-input v-model="form.orderId" autocomplete="off" style="width: 300px" :disabled = "true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12">
                           <!-- <el-form-item label="商品ID" >
                                <el-input v-model="form.goodId" autocomplete="off" style="width: 300px"></el-input>
                            </el-form-item>-->
                            <el-form-item label="选择商品" >
                                <el-select v-model="form.goodId" placeholder="请选择" style="width: 300px" @change="goodChange">
                                    <el-option
                                            v-for="item in goodOptions"
                                            :key="item.productSpuId"
                                            :label="item.productSpuName"
                                            :value="item.productSpuId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- 双列布局 -->
                        <el-col :xs="24" :sm="12">
                            <!--<el-form-item label="用户ID" >
                                <el-input v-model="form.userId" autocomplete="off" style="width: 300px"></el-input>
                            </el-form-item>-->
                            <el-form-item label="选择用户" >
                                <el-select v-model="form.userId" placeholder="请选择" style="width: 300px">
                                    <el-option
                                            v-for="item in userOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12">
                            <el-form-item label="购买数量" >
                                <el-input v-model="form.goodNum" autocomplete="off" style="width: 300px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--
                    <el-row>
                        &lt;!&ndash; 双列布局 &ndash;&gt;
                        <el-col :xs="24" :sm="12">
                            <el-form-item label="订单总金额" >
                                <el-input v-model="form.moneySum" autocomplete="off" style="width: 300px" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="closeDialog">取 消</el-button>
                        <el-button type="primary" @click="handlerSave">确 定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div class="baseTable">
             <!--查询页面，补充需要展示的实体类字段-->
            <el-table
                    stripe
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%">
                <el-table-column
                        label="订单编号"
                        prop="orderId">
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="productSpuName">
                </el-table-column>
                <el-table-column
                        label="用户名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="购买数量"
                        prop="goodNum">
                </el-table-column>
                <el-table-column
                        label="订单总金额"
                        prop="moneySum">
                </el-table-column>
                <el-table-column
                        label="状态"
                        prop="statusText">
                </el-table-column>


                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="openDialog(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SecOrders",
        data() {
            return {
                dialogFormVisible: false,
                simplePrice:0,
                //  按照数据库要求保存字段信息
                form: {
                    orderId:'',
                    goodId:'',
                    userId:'',
                    goodNum:'',
                    moneySum:'',
                    status:0,
                    productSpuName:'',
                    name:''

                },
                dialogTitle:'新增',
                search: '',
                tableData: [],
                goodOptions: [],
                userOptions:[]

            }
        },
        mounted() {
            this.init();
        },
        methods: {
            goodChange(value){
                let selectedOption = this.goodOptions.find(item => item.productSpuId === value);
                this.simplePrice = selectedOption.productSkuPrice;
            },
            handlerSave(){
                this.form.moneySum = this.simplePrice * this.form.goodNum;
                if(this.dialogTitle=='新增'){
                    //   实现 新增 路径
                    this.putRequest("/seckill/secorders/orders/createOrder",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.init();
                        }
                    })
                }else{
                    //   实现 修改 路径
                    this.putRequest("/seckill/secorders/orders/base/updateSecOrders",this.form).then(resp=>{
                        if(resp){
                            this.dialogFormVisible = false;
                            this.init();
                        }
                    })
                }
            },
            // 关闭新增或编辑dialog
            closeDialog(){
                this.dialogFormVisible = false;
            },
            //   为展示元素初始化赋值
            // 打开新增或编辑dialog
            openDialog(row){
                this.dialogFormVisible = true;
                if(row){
                    this.dialogTitle='编辑';
                    this.form.orderId=row.orderId;
                    this.form.goodId=row.goodId;
                    this.form.userId=row.userId;
                    this.form.goodNum=row.goodNum;
                    this.form.moneySum=row.moneySum;
                    this.form.status=row.status;
                    this.form.productSpuName=row.productSpuName;
                    this.form.name=row.name;
                    this.goodChange(row.goodId);
                }else{
                    this.dialogTitle='新增';
                    this.form.orderId='';
                    this.form.goodId='';
                    this.form.userId='';
                    this.form.goodNum='';
                    this.form.moneySum='';
                    this.form.status=0;
                    this.form.productSpuName='';
                    this.form.name='';
                }

            },
            //删除
            handleDelete(row){
                this.$confirm('此操作将永久删除['+row.orderId+'], 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //   实现 删除 路径
                    this.deleteRequest("/seckill/secorders/orders/base/deleteSecOrders/"+row.orderId).then(resp=>{
                        if(resp){
                            this.init();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 查询
            init(){
                //   实现 查询 路径
                this.getRequest("/seckill/secorders/orders/selectAllOrders").then(resp=>{
                    if(resp){
                        this.tableData = resp.data;

                    }
                });
                this.getRequest("/seckill/secgoods/good/selectAllGoods").then(resp=>{
                    if(resp){
                        this.goodOptions = resp.data;

                    }
                });
                this.getRequest("/system/hr/selectAllHr").then(resp=>{
                    if(resp){
                        this.userOptions = resp;

                    }
                });
            }
        }
    }
</script>

<style scoped>
    /* 基础水平布局 */
    .horizontal-form .el-form-item {
        display: flex;
        align-items: center;
    }
    .baseTable{
        width:1500px;
        margin-top:20px
    }
</style>